<template>
  <div v-if="isComponent" class="Register">
    <el-form ref="dataForm" :rules="rules" :model="form" label-position="left" label-width="94px">
      <div class="title-container">
        <h3 class="title">账户注册</h3>
      </div>
      <el-form-item label="手机号码" prop="username">
        <el-input v-model.trim="form.username" />
      </el-form-item>
      <!-- <el-form-item label="登录密码" prop="password">
        <el-input v-model="form.password" type="password" placeholder="请输入8位以上字母和数字组合密码" />
      </el-form-item> -->
      <el-form-item label="短信验证码" prop="code">
        <div class="flexInput">
          <el-input v-model="form.code" />
          <el-button
            type="primary"
            :disabled="!!time || !form.username"
            style="margin-left:20px"
            @click="getCode()"
          >{{ !time ? `获取验证码` : `重新获取(${ time }s)` }}</el-button>
        </div>
      </el-form-item>
      <el-form-item label="推荐人">
        <el-input v-model.trim="form.recommend" placeholder="请输入推荐人手机号" />
      </el-form-item>
      <el-form-item label="企业名称" prop="companyName">
        <el-input v-model.trim="form.companyName" placeholder="请输入企业名称" />
      </el-form-item>
      <el-form-item label="用户类型" prop="type" class="radioItem" style="margin-bottom:0">
        <el-radio-group v-model="form.type">
          <el-radio v-for="item in typeJson" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item label="认证类型" prop="authType" class="radioItem" style="margin-bottom:10px">
        <el-radio-group v-model="form.authType">
          <el-radio
            v-for="item in authTypeJson"
            :key="item.value"
            :label="item.value"
          >{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <el-checkbox v-model="xieyi" style="margin-bottom:15px" v-if="isComponent">
        我已阅读并同意
        <span
          style="color:#965f29"
          @click="$router.push({ path: '/front-help',query:{id:126} })"
        >《用户协议》</span>及<span
          style="color:#965f29"
          @click="$router.push({ path: '/front-help',query:{id:24} })"
        >《隐私政策》</span>
        <span v-if="form.type === 1"
          style="color:#965f29"
          @click="$router.push({ path: '/front-help',query:{id:146} })"
        >《采购商入驻协议》</span>
        <span v-if="form.type === 2"
          style="color:#965f29"
          @click="$router.push({ path: '/front-help',query:{id:131} })"
        >《供应商入驻协议》</span>
      </el-checkbox>
      <el-button class="loginBt" :loading="loading" type="primary" @click="register()">注册</el-button>
      <div class="toReg" v-if="isComponent">
        <!-- <span>忘记密码？</span> -->
        <span></span>
        <span @click="showLogin">去登录></span>
      </div>
    </el-form>
  </div>
  
  <!-- 手机注册界面 -->
  <div v-else class="mobileRegister">
    <div class="navigationBar">
      <i v-if="isAggreement" @click="backAction" class="el-icon-arrow-left"></i>
      <div class="title">{{ getTitle() }}</div>
    </div>
    <transition name="el-fade-in-linear">
      <div v-if="!isAggreement">
        <div class="smallLogo"><img src="../../assets/front-img/logo.png" alt=""></div>
        <el-form ref="dataForm" :rules="rules" :model="form" label-position="left" label-width="94px">
          <el-form-item label="手机号码" prop="username">
            <el-input v-model.trim="form.username" clearable/>
          </el-form-item>
          <el-form-item label="短信验证码" prop="code">
            <div class="sms">
              <el-input v-model="form.code" clearable/>
              <el-button
                type="primary"
                :disabled="!!time || !form.username"
                @click="getCode()"
              >{{ !time ? `获取验证码` : `重新获取(${ time }s)` }}</el-button>
            </div>
          </el-form-item>
          <el-form-item label="推荐人">
            <el-input v-model.trim="form.recommend" placeholder="请输入推荐人手机号" disabled clearable/>
          </el-form-item>
          <el-form-item label="企业名称"  prop="companyName">
            <el-input v-model.trim="form.companyName" placeholder="请输入企业名称" />
          </el-form-item>
          <el-form-item label="用户类型" prop="type" class="radioItem" style="margin-bottom:0">
            <el-radio-group v-model="form.type">
              <el-radio v-for="item in typeJson" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-checkbox v-model="xieyi" style="margin-top:10px">
            我已阅读并同意
            <span
              style="color:#409EFF"
              @click="toAggreement(126)"
            >《用户协议》</span>及<span
              style="color:#409EFF"
              @click="toAggreement(24)"
            >《隐私政策》</span>
            <br>
            <span v-if="form.type === 1"
              style="color:#409EFF"
              @click="toAggreement(146)"
            >《采购商入驻协议》</span>
            <span v-if="form.type === 2"
              style="color:#409EFF"
              @click="toAggreement(131)"
            >《供应商入驻协议》</span>
          </el-checkbox>
        </el-form>
        <div class="registerWrap" >
          <el-button :loading="loading" type="primary" @click="register()">注册</el-button>
        </div>
      </div>
    </transition>
    <transition name="el-fade-in">
      <div v-if="isAggreement" v-html="remark" class="aggreement"></div>
    </transition>
  </div>
</template>

<script>
import { frontRegister } from "@/api/user";
import { getAggreement } from "@/api/front-home";
export default {
  name: "Register",
  props: {
    isComponent: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        authType: 1,
        code: "",
        password: "",
        username: "",
        type: 1,
        recommend: "",
        companyName: "",
      },
      dialogStatus: "",
      dialogFormVisible: false,
      rules: {
        type: [{ required: true, message: "请选择", trigger: "change" }],
        authType: [{ required: true, message: "请选择", trigger: "change" }],
        // companyName: [{ required: true, message: "请填写", trigger: "blur" }],
        username: [
          { required: true, validator: this.$mobileValidator, trigger: "blur" }
        ],
        password: [
          {
            required: true,
            validator: this.$passwordValidator,
            trigger: "blur"
          }
        ],
        code: [{ required: true, message: "请输入", trigger: "blur" }]
      },
      typeJson: Object.assign({}, this.$store.state.user.typeJson),
      authTypeJson: Object.assign({}, this.$store.state.user.authTypeJson),
      loading: false,
      time: 0,
      timeInterval: null,
      xieyi: false,
      routeHasRecommend: false,
      isAggreement: false,
      remark: '',
      aggreementId: 0
    };
  },
  created() {
    if (this.$route.query.recommend) {
      this.form.recommend = this.$route.query.recommend;
      this.routeHasRecommend = true;
    }
  },
  methods: {
    showLogin() {
      this.$emit("showLogin");
    },
    getCode() {
      this.startGoing(60);
      const params = {
        mobile: this.form.username,
        userType: this.form.type,
        type: 6
      };
      this.$store
        .dispatch("user/getCode", params)
        .then(res => {
          this.$message({
            message: "验证码已发送",
            type: "success"
          });
        })
        .catch(() => {
          // console.log(err)
          this.clearTimeFlow();
        });
    },
    startGoing(val) {
      if (this.timeInterval) return;
      this.time = val;
      this.timeInterval = setInterval(() => {
        this.time--;
        if (this.time <= 0) {
          this.clearTimeFlow();
        }
      }, 1000);
    },
    clearTimeFlow() {
      clearInterval(this.timeInterval);
      this.time = 0;
      this.timeInterval = null;
    },
    register() {
      this.form.password = "";
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (!this.xieyi) {
            this.$message.error("请勾选阅读协议");
            return;
          }
          this.loading = true;
          if (this.isComponent) {
            this.$store
              .dispatch("user/register", this.form)
              .then(res => {
                this.loading = false;
                this.showLogin();
                // this.$notify({
                //   title: "成功",
                //   message: "注册成功",
                //   type: "success",
                //   duration: 2000
                // });
                this.$message({
                  message: '注册成功',
                  type: 'success'
                });
              })
              .catch(() => {
                this.loading = false;
              });
          } else {
            frontRegister(this.form)
              .then(response => {
                this.loading = false;
                // this.$notify({
                //   title: "成功",
                //   message: "注册成功",
                //   type: "success",
                //   duration: 2000
                // });
                this.$message({
                  message: '注册成功',
                  type: 'success'
                });
                setTimeout(() => {
                  window.location.href = "http://app.utea88.com/79821719089";
                }, 300);
              })
              .catch(() => {
                this.loading = false;
              });
          }
        }
      });
    },
    toAggreement(id) {
      this.isAggreement = true;
      this.aggreementId = id;
      getAggreement({id: id}).then(res => {
        this.remark = res.remark || '';
      })
    },
    getTitle() {
      if (this.isAggreement) {
        if (this.aggreementId === 126) {
          return '用户协议'
        } else if (this.aggreementId === 24) {
          return '隐私政策'
        }  else if (this.aggreementId === 146) {
          return '采购商入驻协议'
        } else {
          return '供应商入驻协议'
        }
      } else {
        return '注册';
      }
    },
    backAction() {
      this.isAggreement = false;
    }
  }
};
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #fff;
$light_gray: #000;
$cursor: #000;
$them: #965f29;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .Register .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.Register {
  .el-select {
    width: calc(100% - 30px);
    .el-input {
      width: 100%;
    }
  }
  .el-input {
    display: inline-block;
    height: 53px;

    input {
      // background: transparent;
      border: 1px solid #e1e1e1;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 53px;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.1) inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    // background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
    .el-radio__input.is-checked {
      .el-radio__inner {
        border-color: $them;
        background: $them;
      }
    }
    .el-radio__input.is-checked + .el-radio__label {
      color: $them;
    }
    .el-form-item__label {
      line-height: 53px;
    }
  }
  .radioItem {
    .el-form-item__label {
      line-height: 42px;
    }
    .el-form-item--medium {
      .el-form-item__content {
        line-height: 42px;
      }
    }
  }
  .loginBt {
    width: 100%;
    margin: 5px 0 20px;
    padding: 20px 0;
    font-size: 18px;
    background: $them;
    border-radius: 5px;
    border: 0;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: $them;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: $them;
    border-color: $them;
  }
}
</style>

<style lang="scss" scoped>
$them: #965f29;
.Register {
  width: 47%;
  @media only screen and (max-width: 750px) {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .flexInput {
    display: flex;
    .el-input {
      width: auto;
      flex: 1;
    }
    .el-button {
      background: #f6f6f6;
      border-radius: 5px;
      border-color: #e1e1e1;
      color: $them;
    }
  }
  .el-select {
    width: 100%;
  }
  .el-form {
    position: relative;
    padding: 32px 28px 47px;
    overflow: hidden;
    background: #fff;

    @media only screen and (max-width: 750px) {
      width: 90%;
      padding: 10px;
      border-radius: 10px;
    }

    .title-container {
      position: relative;
      .title {
        font-size: 25px;
        color: #000;
        margin: 15px auto 30px auto;
        font-weight: 400;

        @media only screen and (max-width: 750px) {
          font-size: 16px;
          margin: 0px auto 10px auto;
        }
      }
    }
  }
  .toReg {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: #000;
    margin-top: 10px;
    span {
      cursor: pointer;
    }
  }
}

.mobileRegister {
  width: 100%;
  height: 100%;
  position: relative;

  .navigationBar {
    position: relative;;
    display: flex;
    height: 44px;
    border-bottom: 1px solid rgb(209, 210, 210);

    i {
      margin-top: 8px;
      margin-left: 5px;
      font-size: 30px;
    }
    
    .title {
      @include abs-center;
      font-size: 20px;
      line-height: 44px;
    }
  }
  .smallLogo {
    @include flex-center;
    margin-top: 10px;
    width: 100%;
    height: 38px;
    background: white;
    padding: 2px;
    img {
      height: 100%;
    }
  }

  .el-form {
    margin: 10px;

    .sms {
      display: flex;

      .el-button {
        margin-left: 5px;
      }
    }
  }

  .registerWrap {
    @include flex-center;
    margin-top: 15px;
    
    .el-button {
      width: 80%;
    }
  }

  .aggreement {
    padding: 10px;
    width: 100%;
    height: calc(100% - 44px);
    overflow: scroll;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
